<template>
	<view class="content">
		<div class="item filter_input">
			<div class="lable">日期期间：</div>
			<view class="date_item">
				<dyDatePicker placeholder="起始日期" :childValue="from" :minSelect="from_minSelect" :maxSelect="from_maxSelect"
				 :iconshow="false" @getData="getFromData"></dyDatePicker>
			</view>
			<view class="filter_inputline"></view>
			<view class="date_item">

				<dyDatePicker placeholder="结束日期" :minSelect="to_minSelect" :childValue="to" :maxSelect="to_maxSelect" :iconshow="false"
				 @getData="getToData"></dyDatePicker>
			</view>
		</div>
		<div class="item">
			<div class="lable">禁止选择：</div>
			<dyDatePicker childValue="2019/08/08" :disabled="true" @getData="getData" placeholder="请选择日期"></dyDatePicker>
		</div>
		<div class="item">
			<div class="lable">指定开始、结束时间：</div>
			<dyDatePicker @getData="getData" placeholder="请选择日期" minSelect="2018/08/23" maxSelect="2019/08/28"></dyDatePicker>
		</div>
		<div class="item">
			<div class="lable">指定值：</div>
			<dyDatePicker @getData="getData" childValue="2019/08/08" placeholder="请选择日期" minSelect="2000/01/01" maxSelect="2025/12/31"></dyDatePicker>
		</div>
		
		<div class="item">
			<div class="lable">选择月份：</div>
			<dyDatePicker timeType="month" @getData="getData" placeholder="请选择日期" minSelect="2000/01/01" maxSelect="2025/12/31"></dyDatePicker>
		</div>
		<div class="item">
			<div class="lable">选择年份：</div>
			<dyDatePicker timeType="year" @getData="getData" placeholder="请选择日期" minSelect="2000/01/01" maxSelect="2025/12/31"></dyDatePicker>
		</div>
	</view>
</template>

<script>
	import dyDatePicker from '../../components/dy-Date/dy-Date.vue'
	export default {
		components: {
			dyDatePicker
		},
		data() {
			return {
				from_minSelect: '1900/01/01',
				from_maxSelect: '2050/12/31',
				to_minSelect: '1900/01/01',
				to_maxSelect: '2050/12/31',
				from: '',
				to: '',
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * @param {to_minSelect|from}  to_minSelect结束时间的最小选择范围 from=>开始日期
			 */
			getFromData(time) {
				this.to_minSelect = time
				this.from = time
			},
			/**
			 * @param {from_maxSelect|to} from_maxSelect=>开始日期可选最大可选值 to=> 结束日期
			 */
			getToData(time) {
				this.from_maxSelect = time
				this.to = time
			},
			getData() {
				// 
			}
		}
	}
</script>

<style lang="less" scoped>
	* {
		padding: 0px;
		margin: 0 auto;
		box-sizing: border-box;
	}


	.content {
		text-align: center;

		margin-top: 20px;
		font-size: 24rpx;

	}

	.item {
		box-sizing: border-box;
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #ffffff;
		position: relative;
		padding: 0px 10px 0px 100px;
		margin-bottom: 10px;
		text-align: right;
	}

	.item .lable {
		position: absolute;
		left: 10px;
		top: 0px;
		color: #333333;
	}

	uni-picker-view-column {
		font-size: 24rpx;
	}

	.filter_input {
		height: 92rpx;
		padding-top: 10rpx;
	}

	.date_item {
		float: left;
		width: 240upx;
		overflow: hidden;
		display: inline-block;
		text-align: center;
		border: 1px solid #ececec;
		height: 72rpx;
		line-height: 72rpx;

		// font-size: 28rpx;
		&:last-child {
			// float: right;
		}

		input {
			height: 72rpx;

			.uni-input-placeholder {
				color: #b5b8c2;
			}
		}
	}

	.filter_inputline {
		float: left;
		margin: 0 4rpx;
		line-height: 72rpx;

		&:after {
			content: '—';
			font-size: 28rpx;
			color: #848b9a;
		}
	}
</style>
